<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>WebSocket</title>
</head>

<body>
  <h1>Echo Test</h1>
  <input type="text" id="sendTxt" />
  <button id="sendBtn">发送</button>
  <div id="recv"></div>
  <script>
    let websocket = new WebSocket("ws://echo.websocket.org/")
    websocket.onopen = function () {
      console.log('websocket open')
      document.getElementById('recv').innerHTML = "Connected"
    }
    websocket.onclose = function () {
      console.log('websocket close');
    }
    websocket.onmessage = function (e) {
      console.log(e.data);
      document.getElementById('recv').innerHTML = e.data
    }
    document.getElementById('sendBtn').onclick = function () {
      let txt = document.getElementById('sendTxt').value
      websocket.send(txt)
    }
  </script>
</body>

</html>